<template>
  <div>
    <el-button @click="flan">返回</el-button>
    <div style="display: flex; height: 60vh">
      <!-- 聊天列表 -->
      <div
        style="
          position: relative;
          text-align: center;
          height: 70vh;
          width: 300px;
          overflow: auto;
          will-change: transform;
          direction: ltr;
          border-right: 10px solid #f6f8f9;
          cursor: pointer;
        "
      >
        <div style="position: sticky; top: 0; height: 60px">
          <el-input placeholder="请输入内容">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <div
            style="
              display: flex;
              justify-content: space-around;
              padding-top: 10px;
              background: white;
            "
          >
            <div :class="[stare == 1 ? 'texto' : 'texta']" @click="stars(1)">
              会话
            </div>
            <div :class="[stare == 2 ? 'texto' : 'texta']" @click="stars(2)">
              最近
            </div>
            <div :class="[stare == 3 ? 'texto' : 'texta']" @click="stars(3)">
              星标
            </div>
          </div>
        </div>
        <div v-if="stare == 2">
          <div
            v-for="(items, index) in userList"
            :key="index"
            style="
              display: flex;
              margin-top: 10px;
              border-bottom: 1px solid #ebedf0;
              padding-bottom: 10px;
              margin-left: 2%;
              width: 300px;
            "
            @click="add(items)"
          >
            <!-- style="
              display: flex;
              margin-top: 10px;
              border-bottom: 1px solid #ebedf0;
              padding-bottom: 10px;
              margin-left: 2%;
            " -->
            <!-- 头像 -->

            <!-- <div
              style="
                width: 50px;
                height: 50px;
                line-height: 50px;
                background: #f6f8f9;
              "
            >
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />
            </div> -->
            <!-- <div style="margin-left: 20px">
              <div>
                <div style="text-align: left; font-size: 18px">
                  {{ items.customer_name }}
                </div>
                <div
                  v-if="items.msg"
                  style="margin-top: 11px; text-align: left"
                >
                  {{ items.msg[items.msg.length - 1].msg }}
                </div>
              </div>
            </div>
            <div style="margin-left: 30%">
              <div>
                <el-tag effect="plain" type="info">
                  {{ items.status_name }}
                </el-tag>

                <div style="margin-top: 11px; text-align: revert">
                  {{ items.updated_at }}
                </div>
              </div>
            </div> -->
            <div style="display: flex">
              <div>
                <div
                  style="
                    width: 100px;
                    overflow-x: hidden;
                    text-overflow: ellipsis;
                  "
                >
                  {{ items.customer_name }}
                </div>
                <div
                  v-if="items.msg"
                  style="
                    margin-top: 10px;
                    width: 100px;
                    overflow-x: hidden;
                    text-overflow: ellipsis;
                  "
                >
                  {{ items.msg[items.msg.length - 1].msg }}
                </div>
              </div>
              <div style="margin-left: 10px">
                <div>
                  {{ items.status_name }}
                </div>
                <div style="margin-top: 10px">
                  {{ items.updated_at }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>暂无数据</div>
      </div>
      <!-- 聊天内容 -->

      <div
        style="
          width: 60%;
          text-align: center;
          height: 75vh;
          border-right: 10px solid #f6f8f9;
        "
      >
        <div
          style="
            height: 60px;
            border-bottom: 1px solid rgb(246, 248, 249);
            line-height: 60px;
            text-align: left;
            margin-left: 1%;
          "
        >
          <div>客户姓名：{{ List.customer_name }}</div>
        </div>
        <div class="talk_con">
          <div id="words" class="talk_show">
            <div v-for="(i, index) in List.msg" :key="index">
              <span style="font-size: 10px; color: #626b7d">
                {{ i.updated_at }}
              </span>

              <div :class="[i.type == 'Q' ? 'atalk' : 'btalk']">
                <span v-if="i.msg_type == 'text'">{{ i.msg }}</span>

                <span v-else>
                  <el-image
                    :preview-src-list="srcList"
                    :src="i.msg"
                    style="width: 100px; height: 100px"
                    @click="imge(i.msg)"
                  />
                </span>
                <!-- <span>{{ List.user_name }}</span> -->

                <!-- <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              /> -->
              </div>
            </div>
          </div>
          <div class="talk_input">
            <el-popover
              v-model="emojiShow"
              height="700"
              placement="bottom"
              title="标题"
              trigger="click"
              width="500"
            >
              <el-button slot="reference">😀</el-button>
              <div class="browBox">
                <ul class="ul">
                  <li
                    v-for="(items, index) in faceList"
                    :key="index"
                    class="li"
                    @click="getBrow(index)"
                  >
                    {{ items }}
                  </li>
                </ul>
              </div>
            </el-popover>
            <el-upload
              action="https://devapi.jbkl.com/api/upload_img"
              class="upload-demo submit-btn"
              :on-error="uploadImgErr"
              :on-success="uploadImgSuc"
              :show-file-list="false"
            >
              <el-button
                size="small"
                style="width: 60px; height: 30px"
                type="primary"
              >
                图片
              </el-button>
            </el-upload>

            <el-input
              v-model="form.msg"
              placeholder="请输入内容"
              @keyup.enter.native="sendMessage"
              @paste.native="usernamePaste"
            />
            <el-button
              class="submit-btn"
              :disabled="form.msg == ''"
              type="primary"
              @click="sendMessage"
            >
              发送
            </el-button>
          </div>
        </div>
      </div>
      <!-- 资料 -->
      <div style="width: 25%; height: 75vh">
        <div
          style="
            display: flex;
            justify-content: space-around;
            padding-top: 10px;
            background: white;
            text-align: center;
            padding-bottom: 10px;
          "
        >
          <!-- <div :class="[starsab == 1 ? 'texto' : 'texta']" @click="starsa(1)">
            资料
          </div>
          <div :class="[starsab == 2 ? 'texto' : 'texta']" @click="starsa(2)">
            订单
          </div>
          <div :class="[starsab == 3 ? 'texto' : 'texta']" @click="starsa(3)">
            商品
          </div> -->
        </div>

        <div style="margin-left: 13%; margin-top: 35px">
          <el-descriptions :column="1" title="用户信息">
            <el-descriptions-item
              label="家庭组"
              :label-style="{ 'font-size': '16px' }"
            >
              <div style="font-size: 16px">
                {{ List.group_name }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item
              label="用户名"
              :label-style="{ 'font-size': '16px' }"
            >
              <div style="font-size: 16px">{{ List.customer_name }}</div>
            </el-descriptions-item>
            <el-descriptions-item
              label="手机号"
              :label-style="{ 'font-size': '16px' }"
            >
              <div style="font-size: 16px">{{ List.tel }}</div>
            </el-descriptions-item>

            <el-descriptions-item
              label="状态"
              :label-style="{ 'font-size': '16px' }"
            >
              <el-tag effect="plain" size="small" type="info">
                {{ List.status_name }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { msgAdd, trackList } from '@/api/channel'
  import { getUserInfo } from '@/api/user'

  // import { getUserList } from '@/api/public'
  // import GoEasy from 'goeasy'
  const appData = require('@/assets/images/emojis.json')

  export default {
    props: {},
    data() {
      return {
        userList: [
          {
            userName: '吴亦凡',
            item: '1:00',
            boy: '你好',
            tag: '公众号',
          },
        ],
        newsBox: [],
        form: {
          msg: '',
          type: 'A',
        },
        //表情框是否展示
        emojiShow: false,
        //表情列表
        faceList: [],
        //表情文本
        getBrowString: '',
        srcList: [],
        stare: '2', //选项卡切换 1 会话 2 最近 3 星标
        starsab: '1',
        List: {},
      }
    },
    mounted() {},
    created() {
      // 初始化 表情
      this.loadEmojis()
      //连接GoEasy
      this.goEasy.connect({
        data: {},
      })
      this.init()
    },
    beforeMount() {
      let self = this
      //接收消息
      // this.pubsub.subscribe({
      //   channel: 'mec_1_1_all',
      //   onMessage: function (message) {
      //     console.log(message)
      //     const box = JSON.parse(message.content)
      //     self.newsBox.push(box)
      //   },
      //   onSuccess: function () {},
      //   onFailed: function () {},
      // })
      getUserInfo().then((e) => {
        console.log(e)

        this.pubsub.subscribe({
          channel: 'mec_' + e.data.mec_id + '_s_' + e.data.id,
          onMessage() {
            self.init()
            // trackList().then((k) => {
            //   self.userList = k.data
            //   k.data.forEach((i) => {
            //     if (i.id == self.List.id) {
            //       self.List = i
            //     }
            //   })
            // })
          },
          onSuccess() {},
          onFailed() {},
        })
      })
    },
    beforeDestroy() {
      this.goEasy.disconnect({
        onSuccess: function () {
          console.log('GoEasy disconnect successfully.')
        },
        onFailed: function (error) {
          console.log(
            'Failed to disconnect GoEasy, code:' +
              error.code +
              ',error:' +
              error.content
          )
        },
      })
    },
    methods: {
      init() {
        trackList().then((e) => {
          console.log(e)
          this.userList = e.data
          e.data.forEach((e) => {
            if (e.id == this.List.id) {
              this.List = e
              var ele = document.getElementsByClassName('talk_show')
              //判断元素是否出现了滚动条
              if (ele[0].scrollHeight > ele[0].clientHeight) {
                //设置滚动条到最底部
                ele[0].scrollTop = ele[0].scrollHeight
              }
            }
          })
        })
      },
      stars(e) {
        this.stare = e
      },
      starsa(e) {
        this.starsab = e
      },
      //加载表情，存放到表情列表中
      loadEmojis() {
        for (let i in appData) {
          this.faceList.push(appData[i].char)
        }
      },
      // 获取用户点击之后的标签 ，存放到输入框内
      getBrow(index) {
        for (let i in this.faceList) {
          if (index == i) {
            this.getBrowString = this.faceList[index]
            this.form.msg += this.getBrowString
          }
        }
        this.emojiShow = false
      },
      // 聊天图片回显
      imge(e) {
        this.srcList = [e]
      },
      // 上传图片错误 回调
      uploadImgErr() {},
      // 上传图片正确 回调
      uploadImgSuc(res) {
        // this.form.msg = res.data
        // this.form.msg_type = 'image'
        // let self = this
        // if (this.form.msg.trim() !== '') {
        //   //发送消息
        //   this.pubsub.publish({
        //     channel: 'mec_1_1_all',
        //     message: JSON.stringify(self.form),
        //     onSuccess: function () {
        //       self.form.msg = ''
        //     },
        //   })
        // }
        const data = {
          type: 'A',
          user_id: this.List.user_id,
          customer_id: this.List.customer_id,
          msg_type: 'image',
          msg: res.data,
          track_id: this.List.id,
        }
        msgAdd(data).then(() => {
          this.init()
          this.form.msg = ''
        })
      },
      sendMessage: function () {
        const data = {
          type: 'A',
          user_id: this.List.user_id,
          customer_id: this.List.customer_id,
          msg_type: 'text',
          msg: this.form.msg,
          track_id: this.List.id,
        }
        msgAdd(data).then(() => {
          this.init()
          this.form.msg = ''
        })
        // this.form.msg_type = 'text'
        // //发送消息
        // let self = this
        // if (this.form.msg.trim() !== '') {
        //   //发送消息
        //   this.pubsub.publish({
        //     channel: 'mec_1_1_all',
        //     message: JSON.stringify(self.form),
        //     onSuccess: function () {
        //       self.form.msg = ''
        //       var ele = document.getElementsByClassName('talk_show')
        //       //判断元素是否出现了滚动条
        //       if (ele[0].scrollHeight > ele[0].clientHeight) {
        //         //设置滚动条到最底部
        //         ele[0].scrollTop = ele[0].scrollHeight
        //       }
        //     },
        //   })
        // }
      },
      usernamePaste(e, r) {
        console.log(e, r)
      },
      add(e) {
        this.List = e
        console.log(e)
        //  var ele = document.getElementsByClassName('talk_show')
        // //判断元素是否出现了滚动条
        // if (ele[0].scrollHeight > ele[0].clientHeight) {
        //   //设置滚动条到最底部
        //   ele[0].scrollTop = ele[0].scrollHeight
        // }
      },
      flan() {
        //断开连接
        this.$emit('send')
      },
    },
  }
</script>

<style scoped>
  .texto {
    color: #1890ff;
    border-bottom: 2px solid;
  }
  .texta {
    color: #000;
  }
  .talk_con {
    width: 100%;
    background: #f9f9f9;
  }

  .talk_show {
    height: 55vh;
    background: #fff;
    margin: 10px auto 0;
    /* overflow: auto; */
    word-break: break-all;
    word-wrap: break-word;
    overflow-y: auto;
  }

  .talk_input {
    width: 100%;
    display: flex;
  }

  .atalk {
    margin: 10px;
    text-align: left;
  }

  .atalk span {
    display: inline-block;
    background: #0181cc;
    border-radius: 10px;
    color: #fff;
    padding: 5px 10px;
  }

  .btalk {
    margin: 10px;
    text-align: right;
  }

  .btalk span {
    display: inline-block;
    background: #ef8201;
    border-radius: 10px;
    color: #fff;
    padding: 5px 10px;
  }

  .itemTab {
    color: #3193ef;
    background: #e9e7e7;
  }
  /*  */
  .ul {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
  }
  .li {
    cursor: pointer;
    width: 10%;
    font-size: 26px;
    list-style: none;
    text-align: center;
  }
  .submit-btn {
    margin: 0 15px 10px 0;
    float: right;
  }
</style>
